<template>
  <button id="toggle_btn">隐藏省会图层</button>
</template>

<script setup>
// 引入jquery
import $ from 'jquery'
import { provLayer } from '../map_libs/provincial.js'

onMounted(() => {
  const $map = inject('$map')
  // 创建标志
  var isShow = false
  // 隐藏省会点业务
  $('#toggle_btn').on('click', function () {
    // !标志
    isShow = !isShow
    provLayer.setVisible(!isShow)
    // 更改button内容
    if (isShow) {
      this.innerHTML = '显示省会图层'
    } else {
      this.innerHTML = '隐藏省会图层'
    }
  })
})
</script>

<style scoped>
#toggle_btn {
  height: 26px;
  border-radius: 2px;
  position: fixed;
  top: 3vh;
  right: 5vw;
  background-color: rgba(73, 116, 170, 0.7);
  color: #fff;
  border: 0;
}
</style>
